import React, {forwardRef, useImperativeHandle, useState} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Modal,
  TouchableOpacity,
  Image,
} from 'react-native';
import icon_group from '../../../assets/icon_group.png';
import icon_create_group from '../../../assets/icon_create_group.png';
import Toast from '../../../components/widget/Toast';
export interface FloatMenuRef {
  show: (pageY: number) => void;
  hide: () => void;
}
type PropsType = {};
const FloatMenu: React.ForwardRefExoticComponent<
  PropsType & React.RefAttributes<FloatMenuRef>
> = forwardRef<FloatMenuRef, PropsType>((props, ref) => {
  const [visible, setVisible] = useState<boolean>(false);
  const [y, setY] = useState<number>(100);
  const show = (pageY: number) => {
    setY(pageY);
    setVisible(true);
  };
  const hide = () => {
    setVisible(false);
  };

  useImperativeHandle(ref, () => {
    return {
      show,
      hide,
    };
  });
  const onGroupPress = () => {
    Toast.show('群聊广场');
    hide();
  };

  const onCreatePress = () => {
    Toast.show('创建群聊');
    hide();
  };

  const contentStyle = StyleSheet.compose(styles.content, {
    top: y,
  });
  return (
    <Modal
      transparent={true}
      visible={visible}
      style={styles.root}
      statusBarTranslucent={true}
      animationType="fade"
      onRequestClose={hide}>
      <TouchableOpacity style={styles.root} onPress={hide}>
        <View style={contentStyle}>
          <TouchableOpacity style={styles.menuItem} onPress={onGroupPress}>
            <Image source={icon_group} style={styles.menuIcon} />
            <Text style={styles.menuTxt}>群聊广场</Text>
          </TouchableOpacity>
          <View style={styles.line} />
          <TouchableOpacity style={styles.menuItem} onPress={onCreatePress}>
            <Image source={icon_create_group} style={styles.menuIcon} />
            <Text style={styles.menuTxt}>创建群聊</Text>
          </TouchableOpacity>
        </View>
      </TouchableOpacity>
    </Modal>
  );
});

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
    backgroundColor: '#00000040',
  },
  content: {
    width: 160,
    backgroundColor: 'white',
    borderRadius: 16,
    position: 'absolute',
    right: 10,
  },
  line: {
    height: 1,
    marginLeft: 16,
    marginRight: 20,
    backgroundColor: '#eee',
  },
  menuItem: {
    width: '100%',
    flexDirection: 'row',
    alignItems: 'center',
    height: 56,
    paddingLeft: 20,
  },
  menuIcon: {
    width: 28,
    height: 28,
  },
  menuTxt: {
    fontSize: 18,
    color: '#333',
    marginLeft: 10,
  },
});
export default FloatMenu;
